<template>
	<view class="tab">
		<view class="tab-item" v-for="(item,index) in tabs" :key='index' @click="tabChange(index)">
			<view class="tab-item-content">
				<view :class="activeIndex==index?'active-txt':''">{{item}}</view>
				<view v-if="activeIndex==index" class="indicator"
				:style="{backgroundColor:activeColor}"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tabs: {
				type: Array,
				default () {
					return []
				}
			},
			activeIndex:{
				type:Number,
				default:0
			},
			activeColor:{
				type:String,
				default:'#4da1ff'
			},
			unactiveColor:{
				type:String,
				default:'#737373'
			}
		},
		methods:{
			tabChange(index){
				if(this.activeIndex == index){
					return;
				}
				this.$emit('tabChange',index)
			}
		}

	}
</script>

<style lang="scss" scoped>
	.tab {
		height: 80upx;
		line-height: 76upx;
		display: flex;

		&-item {
			flex: 1;
			text-align: center;
			font-size: 30upx;
			color: #737373;
			
			&-content{
				display: inline-block;
			}
		}
	}

	.indicator {
		height: 6upx;
		border-radius: 3upx;
		padding: 0 70upx;
	}
	.active-txt{
		color: #4da1ff;
	}
</style>
